<template>
	<view class="bg">
		<xl-navbar title="Starts星级评分" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-stars v-model="score"></xl-stars>
			
			<view class="title">大小和间距</view>
			<xl-stars v-model="score" size="20" margin="10"></xl-stars>
			
			<view class="title">未选中镂空星星</view>
			<xl-stars v-model="score" :fill="false"></xl-stars>
			
			<view class="title">点击时允许选择半星</view>
			<xl-stars v-model="score" allowHalf @change="change"></xl-stars>
			
			<view class="title">对齐方式</view>
			<xl-stars v-model="score" align="center"></xl-stars>
			<xl-stars v-model="score" align="right"></xl-stars>
			
			<view class="title">修改最大评分数</view>
			<xl-stars v-model="score" max="10.5"></xl-stars>
			
			<view class="title">修改颜色</view>
			<xl-stars v-model="score" color="#aaa" activeColor="red"></xl-stars>
			
			<view class="title">只读</view>
			<xl-stars v-model="score" readonly></xl-stars>
			
			<view class="title">禁用，设置禁用颜色</view>
			<xl-stars v-model="score" disabled disabledColor="#ccc"></xl-stars>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const score = ref(3.3)
	
	function change(value){
		
		uni.$xl.toast(value)
	}
</script>
